let styles = require('./popup.css')
import Icomponent from '../interface/icomponent'

interface Ipopup {
    width?: string;
    height?: string;
    title?: string;
    pos?: string;
    mask?: boolean;
    maskClickClose?: boolean;
    content?: (content: HTMLElement) => void;
}

function popup(options: Ipopup) {
    return new Popup(options)
}

class Popup implements Icomponent {
    tempContainer;
    mask;
    constructor(private settings: Ipopup) {
        this.settings = Object.assign({
            width: '100%',
            height: "100%",
            title: "",
            pos: "center",
            mask: true,
            maskClickClose: false,
            content: function () { }
        }, this.settings)
        this.init()
    }

    //初始化
    init() {
        this.template();
        this.settings.mask && this.createMask();
        this.handle();
        this.contentCallback();
        this.clickMaskClose();
    }
    //创建模板
    template() {
        this.tempContainer = document.createElement('div')
        this.tempContainer.style.width = this.settings.width;
        this.tempContainer.style.height = this.settings.height;
        this.tempContainer.className = styles.popup
        this.tempContainer.innerHTML = `
            <div class="${styles['popup-title']}">
                <h3>${this.settings.title}</h3>
                <i class="iconfont icon-guanbi"></i>
            </div>
            <div class="${styles['popup-content']}"></div>
        `;
        document.body.appendChild(this.tempContainer);
        if (this.settings.pos === 'left') {
            this.tempContainer.style.left = 0;
            this.tempContainer.style.top = (window.innerHeight - this.tempContainer.offsetHeight) + 'px'

        }
        else if (this.settings.pos === 'right') {
            this.tempContainer.style.right = 0
            this.tempContainer.style.top = (window.innerHeight - this.tempContainer.offsetHeight) + 'px'

        }
        else {
            this.tempContainer.style.left = (window.innerWidth - this.tempContainer.offsetWidth) / 2 + 'px'
            this.tempContainer.style.top = (window.innerHeight - this.tempContainer.offsetHeight) / 2 + 'px'
        }

    }
    //事件
    handle() {
        let popupClose = this.tempContainer.querySelector(`.${styles['popup-title']} i`)
        popupClose.addEventListener('click', () => {
            this.closeMask()
        })
    }
    //点击遮罩关闭
    clickMaskClose() {
        this.settings.mask && this.mask.addEventListener('click', () => {
            this.settings.maskClickClose && this.closeMask()
        })
    }

    //关闭弹窗
    closeMask() {
        document.body.removeChild(this.tempContainer)
        document.body.style.overflow = "scroll"
        this.settings.mask && document.body.removeChild(this.mask)
    }
    //创建遮罩
    createMask() {
        this.mask = document.createElement('div')
        this.mask.className = styles.mask
        this.mask.style.width = "100%"
        this.mask.style.height = document.documentElement.clientHeight + 'px'
        document.body.appendChild(this.mask)
    }

    contentCallback() {
        let popupContent = this.tempContainer.querySelector(`.${styles['popup-content']}`);
        this.settings.content(popupContent)
    }
}

export default popup